<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>TodoList </title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<input v-model="inputVlaue"/>
		<button @click="handleSubmit">提交</button>
		<ul>
			<!-- <li v-for="(item,index) of list" :key="index">{{item}}</li> -->
			<todo-item v-for="(item,index) of list" 
			:key="index"
			:content="item"
			:index="index"
			@delete="handleDelete"
			></todo-item>
		</ul>
	</div>
	
	<script>

		// 创建全局组件,不要注册就可以使用，  组件也是一个实例，实例的方法组件全可以使用
		Vue.component('todo-item',{
			props: ["content","index"], //接收content参数
			template: '<li @click="handleClick">{{content}}\t{{index}}</li>',
			methods: {
				handleClick: function(){
					//alert('我被点击了！！')
					//delete data 子组件和父组件进行通信
					this.$emit('delete', this.index)
				}
			}
		})

		//局部组件,需要注册
		// var TodoItme = {
		// 	template: '<li>item</li>'
		// }


		new Vue({
			el:"#root",
			//注册局部组件
			// components:{
			// 	'todo-item':TodoItme
			// },
			data:{
				inputVlaue: "",
				list: [],
			},
			methods: {
				handleSubmit: function(){
					this.list.push(this.inputVlaue)
					this.inputVlaue=""
				},
				handleDelete: function(index){
					alert('删除'+index)
					this.list.splice(index,1)
				}
			}
		})
	</script>

</body>
</html> 